import React, { Component } from 'react';
import './App.css';
import 'antd/dist/antd.css'
import { Layout,Input,Tabs,notification, message} from 'antd';
import TodoItem from "./components/TodoItem";

const { TabPane } = Tabs;
const { Header, Content, Footer } = Layout;
const { Search } = Input;

class App extends Component {
  //创建阶段
  //定义组件的初始化状态
  constructor(props){
    super(props)//调用父类的构造函数

    this.state = {
      sourceData:JSON.parse(localStorage.getItem("todos"))||[],//源数据 
      showData:[],//显示数据
      key:"1"
    }
    console.log(this.state)
  }

  componentWillMount(){
    // console.log("componentWillMount")
    // 更改组件的默认状态
    this.filterTodo(this.state.key)
  }
  //返回todo 对象 
  todo(title){
    return{
      title:title,
      status:"PENDDING"
    }
  }

  //筛选函数
  filterTodo(key){
    console.log(key)
    switch (key){
      case "1":
        var temp = [];
        this.state.sourceData.forEach(element=>{
          if(element.status  !== "DELETE"){
            temp.push(element);
          }
        })
        this.setState({
          showData:temp
        })
        // console.log(this.state.showData)
        break;
      case "2":
        var temp = [];
        this.state.sourceData.forEach(element=>{
          if(element.status === "FINISHED"){
            temp.push(element);
          }
        });
        this.setState({
          showData:temp
        })
        break;
      case "3":
        var temp = [];
        this.state.sourceData.forEach(element=>{
          if(element.status === "PENDDING"){
            temp.push(element);
          }
        });
        this.setState({
          showData:temp
        })
        break;
      case "4":
        var temp = [];
        this.state.sourceData.forEach(element=>{
          if(element.status === "DELETE"){
            temp.push(element);
          }
        });
        this.setState({
          showData:temp
        })
        break;
    }
  }

  //修改todo状态
  changeTodostatus=(todo)=>{
    // console.log(todo);
    //查找需要修改的todo
    var tempTodo = this.state.sourceData.find(element=>{
      return element.title === todo.title;
    })

    if(tempTodo){
      if(todo.checked){
        tempTodo.status = "FINISHED"
      }else{
        tempTodo.status = "PENDDING"
      }
    }

    this.setState({
      sourceData:this.state.sourceData
    })

    this.filterTodo(this.state.key)
    localStorage.setItem("todos",JSON.stringify(this.state.sourceData))
    // console.log(this.state.sourceData);
  }

  //删除todo
  deleteTodo=(todo)=>{
    var tempTodo = this.state.sourceData.find(element=>{
      return  element.title === todo.title
    });

    if(tempTodo){
      tempTodo.status = "DELETE";
    }

    this.setState({
      sourceData:this.state.sourceData
    })

    this.filterTodo(this.state.key)
    localStorage.setItem("todos",JSON.stringify(this.state.sourceData))
  }

  //组件的state改变 render就会被调用 
  render() {
    return (
      <div className="App">
        <Layout className="layout">
          <Header>
            <div className="header">
              <div>
              <Search 
              placeholder="请输入"
              enterButton="添加"
              size="large"
              onSearch={value =>{
                //为空判断
                if(value.length === 0){
                  message.error("")
                  return;
                }
                //去重 
                var flag = false;
                this.state.sourceData.forEach(element => {
                  if(element.title === value){
                    flag = true;
                  }
                });
                
                if(!flag){
                  //组装todo
                  var todo = this.todo(value);
                  var temp = this.state.sourceData;
                  temp.push(todo);

                  this.setState({
                    sourceData:temp
                  })
                  localStorage.setItem("todos",JSON.stringify(temp));

                }else{
                  message.error("输入为空")
                }

                this.filterTodo(this.state.key)
              }}
              style={{ width: 300 }}/>
              </div>
            </div>
          </Header>
          <Content style={{ padding: '0 50px' }}>
            <div className="site-layout-content">
              <div>
                <Tabs defaultActiveKey={this.state.key} onChange={(key)=>{
                  this.setState({
                    key:key
                  })
                  this.filterTodo(key)
                }}>
                  <TabPane tab="全部" key="1">
                  </TabPane>
                  <TabPane tab="已完成" key="2">
                  </TabPane>
                  <TabPane tab="未完成" key="3">
                  </TabPane>
                  <TabPane tab="回收站 " key="4">
                  </TabPane>
                </Tabs>
                <div className="todo_content">
                  {
                    this.state.showData.map(element=>{
                      return <TodoItem todo={element} changeTodostatus={this.changeTodostatus}
                      deleteTodo={this.deleteTodo}
                      key={element.title}/>
                    })
                  }.
                </div>
              </div>
            </div>
          </Content>
        </Layout>

      </div>
    );
  }
  //mounted
  componentDidMount(){
    // console.log("componentDidMount")
  }


}

export default App;
